Bài 1

HTML Basic

All HTML documents must start with a document type declaration: <!DOCTYPE html>
The HTML document itself begins with <html> and ends with <html>
The visible part of the HTML document is between <body>

HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading

HTML paragraphs are defined with the p tag

HTML links are defined with the <a> tag

HTML images are defined with the <img> tag
The source file (<src>),alternative text(<alt>),<width>,and <height> are provided as attributes:

HTML Elements

The HTML elementis everything from the start tag to the end tag:

<tagname> Content goes here...<tagname>/

Start Tag	Element content	End tag
h1	My first heading	/h1
p	My first paragraph	/p
br	none	none

HTML elements can be nested (this means that elements can contain other elements).
All HTML documents consist of nested HTML elements.
The following example contains four HTML elements (<html>,<body>, <h1> and <p>)

Some HTML elements will display correctly, even if you forget the end tag

HTML elements with no content are called empty elements.
The <br> tag defines a line break, and is an empty element without a closing tag

HTML Attributes

The <a> tag defines a hyperlink. The <href> attribute specifies the URL of the page the link goes to

The <img>tag is used to embed an image in an HTML page.The <src> attribute specifies the path to the image to be displayed

1. Absolute URL-Links to an external image that is hosted on another website. Example: src="https://www.w3schools.com/images/img_girl.jpg".

Notes:External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.

2. Relative URL Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example: src="/images/img_girl.jpg".

Tip:It is almost always best to use relative URLs. They will not break if you change domain.

The <img> tag should contain <width> and <height> attributes,which specify the width and height of the image (in pixels)

The required <alt>attribute for the <img>tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to a slow connection, or an error in the <src>attribute, or if the user uses a screen reader.

The <style>attribute is used to add styles to an element, such as color, font, size, and more.

The <title> attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over the element

HTML Headings

HTML headings are defined with the <h1> to <h6> tags
<h1> defines the most important heading. <h6>defines the least important heading.

HTML Parahraphs

The HTML <p> element defines a paragraph. A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:

The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:

<pre>

The HTML <pre> element defines preformatted text.
The text inside a <pre>element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks

HTML Style

The HTML <style> ttribute is used to add styles to an element, such as color, font, size, and more.

The CSS <background-color> property defines the background color for an HTML element.

The CSS <color> property defines the text color for an HTML element

The CSS <font-family> property defines the font to be used for an HTML element

The CSS <font-size>property defines the text size for an HTML element

The CSS <text-align> property defines the horizontal text alignment for an HTML element

HTML Formatting Elements

<b>

<strong>

The HTML <b> element defines bold text, without any extra importance
The HTML <strong> element defines text with strong importance. The content inside is typically displayed in bold.

<i>

<em>

The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.
The HTML <em> element defines emphasized text. The content inside is typically displayed in italic

<mark> - Marked text
<small>- Smaller text
<del>- Delete text
<ins>- Inserted text
<sub>- Subscript text
<sup> - Superscript text

HTML Quotation

<blockquote>

The HTML <blockquote> element defines a section that is quoted from another source.
Browsers usually inden <blockquote> elements

<q>

The HTML <q> tag defines a short quotation.
Browsers normally insert quotation marks around the quotation.

<abbr>

The HTML <abbr>tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
Marking abbreviations can give useful information to browsers, translation systems and search-engines.

<address>

The HTML <address> tag defines the contact information for the author/owner of a document or an article.
The contact information can be an email address, URL, physical address, phone number, social media handle, etc.
The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element.

<cites>

The HTML <cite>tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).
The text in the <cite>

HTML `<bdo>` for Bi-Directional Override

BDO stands for Bi-Directional Override.
The HTML <bdo> tag is used to override the current text direction

HTML

HTML comments are not displayed in the browser, but they can help document your HTML source code.

HTML Color

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

Format inline: `<[Tag] Style=" char-color: your-color; [other-attribute];">...`

Colors name: red; blue...
RGB color: rgb(red, green, blue); example: rgb(200, 20, 30)
HEX color: #RRGGBB; example: #0055ff
HSL color: hsl(hue, saturation, lightness); example: hsl(9, 100%, 64%)

color: is your text color
Ex: style="color: #1167af"
background-color: is your text backgroud color
Ex: Style ="background-color: rgb(255, 200, 200)"
border: is your text border size and color; format: "border: ?px solid your-color"
Ex: style="border: 2px solid hsl(9, 100%, 64%)

HTML Links

HTML Links are hyperlinks

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

Format: `<a href="URL" target="your Attribute">your tittles</a>`

You can use or don't use target

Basic link
<a href="https://www.google.com/">Basic </a>
- blank: Opens the document in a new window or tab
- self: Opens the document in the same window/tab as it was clicked
- parent: Opens the document in the parent frame
- top: Opens the document in the full body of the window
<a href="https://www.google.com/" target="blank" >Blank </a>
Absolute URLs include the full web address.
<a href="https://www.google.com/">Absolute </a>
Relative URLs point to pages within the same website [ Without domain] so you can't open this link in this page
<a href="daotao.hnmu.edu.vn/Common/ChiTietTin/1836">Relative </a>
Send email to daotao@hnmu.edu.vn
<a href="mailto:daotao@hnmu.edu.vn">My email </a>
Linking by Image: use image as a link
Button as a link

HTML

Images can improve the design and the appearance of a web page.

Insert img syntax: <img src="img-url" alt="text">

The HTML <img> tag is used to embed an image in a web page.

<img>

<src> - Specifies the path to the image
<alt> - Specifies an alternate text for the image

Image Size - Width and Height

<width> and <height> can be use as attributes

<img src="https://biz.prlog.org/oneimageinc/logo.jpg" alt="imgage" width="250";height="250";>

Or you can use the <style> attribute to specify the width and height of an image.

<img src="https://biz.prlog.org/oneimageinc/logo.jpg" alt="imgage" style="width:250px;height:250px;">

Images in Another Folder

If you have your images in a sub-folder, you must include the folder name in the src attribute:

Ex: <img src="/picture/images.png" alt="bruh" style="width:128px;height:128px;">

To point to an image on another server, you must specify an absolute (full) URL in the src attribute:

Ex: <img src="https://biz.prlog.org/oneimageinc/logo.jpg" alt="img">

HTML allows animated GIFs:

Use syntax: <img src="img-name.gif">

Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag:

Image floating

Use the CSS float property to let the image float to the right or to the left of a text

Ex: <img src="https://th.bing.com/th/id/OIP.qkFfVPRGs3lHfF2gNZzUcAHaHa?rs=1&pid=ImgDetMain" alt="Succrose" style="float:inline-start;width:60px;height:auto;">

The image will float to the left-inline of the text

Common Image Formats

Abbreviation	File Formatt	File Extension
APNG	Animated Portable Network Graphics	.apng
GIF	Graphics Interchange Format	.gif
ICO	Microsoft Icon	.ico, .cur
JPEG	Joint Photographic Expert Group image	.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG	Portable Network Graphics	.png
SVG	Scalable Vector Graphics	.svg

HTML Image Tags

Tag	Description
<img>	Defines an image
<map>	Defines an image map
<area>	Defines a clickable area inside an image map
<picture>	Defines a container for multiple image resources

To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:

Add a background image on a HTML element:

You can also specify the background image in the <style> element, in the <head> section

If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element

To avoid the background image from repeating itself, set the background-repeat property to no-repeat.

If you want the background image to cover the entire element, you can set the background-size property to cover.

Also, to make sure the entire element is always covered, set the background-attachment property to fixed

If you want the background image to stretch to fit the entire element, you can set the background-size property to 100% 100%

HTML <picture> Element

The HTML <picture> element allows you to display different pictures for different devices or screen sizes.

HTML Tables

Each table cell is defined by a <td> and a </td> tag. and stand for table data

Ex: <td>cell-data</td>

Each table row starts with a <tr> and ends with a </tr> tag.

Ex:

<tr>

<td>cell-data</td>

</tr>

Table header

replace <td> by <th>

an example:

Header 1	Header 2
<cell 1>	cell 2

HTML Lists

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default:

Ex:

<ul> unordered list

<li>item-1</li>

<li>item-2</li>

</ul>

and this is result:

item-1
itwm-2

Ordered HTML List

An ordered list starts with the </ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default:

Ex:

<ol> ordered list

<li>item-1</li>

<li>item-2</li>

</ol>

and this is result:

item-1
itwm-2

HTML Description Lists

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term

Ex:

<dl> Description list

<dt>term-1</dt>

<dd>- item-1</dd>

<dt>term-2</dt>

<dd>- item-2</dd>

</dl>

and this is result:

term-1: - item-1
term-2: - item-2

HTML List Tags

Tag	Description
<ul>	Defines an unordered list
<ol>	Defines an ordered list
<li>	Defines a list item
<dl>	Defines a description list
<dt>	Defines a term in a description list
<dd>	Describes the term in a description list

HTML Block and Inline Elements

A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
Two commonly used block elements are:<p> and <div>
The <p> element defines a paragraph in an HTML document.
The <div> element defines a division or a section in an HTML document.

An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
This is a <span> element inside a paragraph.

The <div> element is often used as a container for other HTML elements.
The <div>element has no required attributes, but <style>, <class> and <id> are common.
When used together with CSS, the <div> element can be used to style blocks of content

The <span> element is an inline container used to mark up a part of a text, or a part of a document.
The <span> element has no required attributes,but <style>, <class> and <id> are common.
When used together with CSS, the <span>element can be used to style parts of the text

Bài 1

HTML Basic

HTML Elements

HTML Attributes

HTML Headings

HTML Parahraphs

HTML Style

HTML Formatting Elements

HTML Quotation

HTML <bdo> for Bi-Directional Override

HTML

HTML comments are not displayed in the browser, but they can help document your HTML source code.

HTML Color

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

Format inline: <[Tag] Style=" char-color: your-color; [other-attribute];">...

HTML Links

HTML Links are hyperlinks

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

Format: <a href="URL" target="your Attribute">your tittles</a>

You can use or don't use target

HTML

Images can improve the design and the appearance of a web page.

Image Size - Width and Height

Images in Another Folder

If you have your images in a sub-folder, you must include the folder name in the src attribute:

Image as a Link

Image floating

Common Image Formats

HTML Image Tags

HTML <picture> Element

HTML Tables

Table header

HTML Lists

Unordered HTML List

Ordered HTML List

HTML Description Lists

HTML List Tags

HTML Block and Inline Elements

HTML `<bdo>` for Bi-Directional Override

Format inline: `<[Tag] Style=" char-color: your-color; [other-attribute];">...`

Format: `<a href="URL" target="your Attribute">your tittles</a>`